﻿<DemoPageSectionComponent Id="DialogsAndWindows-Window-Overview" ShowSizeMode="true">
    <ChildContentWithParameters Context="Params">
        <div class="d-flex justify-content-center p-3" @ref=@popupTarget>
            <DxButton RenderStyle="ButtonRenderStyle.Secondary" Click="@TogglePopupVisibilityAsync">@GetButtonText()</DxButton>
        </div>
        <DxWindow @ref=windowRef
                  AllowResize="true"
                  ShowCloseButton="true"
                  CloseOnEscape="true"
                  HeaderText="Edit Contact"
                  FooterText="Footer"
                  ShowFooter="true"
                  Width="max(25vw, 250px)"
                  MinWidth="300"
                  MinHeight="200"
                  MaxWidth="800"
                  MaxHeight="500"
                  SizeMode="Params.SizeMode"
                  @bind-Visible=windowVisible>
            <BodyContentTemplate>
                <SampleEditForm />
            </BodyContentTemplate>
            <FooterContentTemplate>
                <DxButton CssClass="popup-button my-1 ms-2" RenderStyle="ButtonRenderStyle.Primary" Text="OK" Click="@context.CloseCallback" />
                <DxButton CssClass="popup-button my-1 ms-2" RenderStyle="ButtonRenderStyle.Secondary" Text="Cancel" Click="@context.CloseCallback" />
            </FooterContentTemplate>
        </DxWindow>
    </ChildContentWithParameters>

    @code {
        DxWindow windowRef;
        ElementReference popupTarget;
        bool windowVisible;
        string GetButtonText() => !windowVisible ? "SHOW A WINDOW" : "CLOSE A WINDOW";

        async Task TogglePopupVisibilityAsync() {
            if (windowVisible)
                await windowRef.CloseAsync();
            else
                await windowRef.ShowAtAsync(popupTarget);
        }
    }

</DemoPageSectionComponent>
